<template>
   <el-card class="box-card">
    <my-bread level1="商品管理" level2="分类参数"></my-bread>
    <!--提示警告信息-->
    <el-alert class="alert" title="注意:只允许为第三级分类设置参数" type="warning" show-icon> </el-alert>
    <!--商品分类-->
    <el-form >
        <el-form-item label="商品分类">
            <el-cascader
            expand-trigger="hover"
            :show-all-levels="false"
            :options="goodslist"
            :props="defaultProps"
            v-model="selectedOptions"
            @change="handleChange">
          </el-cascader>
        </el-form-item>
    </el-form>
    <!--tabs-->
    <el-tabs v-model="active" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="1">
         <el-button type="success" size="mini">设置动态参数</el-button>
        <!--表格-->
         <el-table :data="arrDyparams" style="width: 100%">

         <el-table-column type="expand" label="#">
           <template slot-scope="scope">

                <el-tag
                  :key="tag"
                  v-for="tag in scope.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(scope.row,tag)">
                  {{tag}}
                </el-tag>

                <el-input
                  v-if="inputVisible"
                  class="input-new-tag"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)">
                </el-input>

                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
           </template> 
        </el-table-column>
       
        <el-table-column prop="attr_name" label="属性名称">
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                plain
                type="primary"
                icon="el-icon-edit"
                circle></el-button>
                <el-button
                
                size="mini"
                plain
                type="danger"
                icon="el-icon-delete"
                circle></el-button>
                <el-button
                size="mini"
                plain type="success"
                icon="el-icon-check"
                @click="showMegBoxDele(scope.row)"  
                circle></el-button>

            </template>
        </el-table-column>
    </el-table>

      </el-tab-pane>
      <el-tab-pane label="静态参数" name="2">
        <el-button type="success" size="mini">设置静态参数</el-button>
        <!--表格-->
         <el-table :data="stateDyparams" style="width: 100%">
        <el-table-column type="index" label="#" width="80"></el-table-column>
       
        <el-table-column prop="attr_name" label="属性名称">
        </el-table-column>
        <el-table-column prop="attr_vals" label="属性值">
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                plain
                type="primary"
                icon="el-icon-edit"
                circle></el-button>
                <el-button
                
                size="mini"
                plain
                type="danger"
                icon="el-icon-delete"
                circle></el-button>
                <el-button
                size="mini"
                plain type="success"
                icon="el-icon-check"
                @click="showMegBoxDele(scope.row)"  
                circle></el-button>

            </template>
        </el-table-column>
    </el-table>
      </el-tab-pane>
  </el-tabs>

   </el-card>
</template>

<script >
export default{
    data(){
        return{
            active:'1',
            goodslist:[],
            defaultProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            selectedOptions:[],
            //动态参数的数据
            arrDyparams:[],
            stateDyparams:[],
            inputVisible: false,
            inputValue: ''
        }
    },
    created(){
        this.getGoodsList()
    },
    methods:{
       async handleClose(attr,tag) {
        attr.attr_vals.splice(attr.attr_vals.indexOf(tag), 1);
          
        //categories/:id/attributes/:attrId
        let putdata = {
        attr_name: attr.attr_name,
        attr_sel: "many",
        attr_vals: attr.attr_vals
      };
      const res = await this.$http.put(
        `categories/${this.selectedOptions[2]}/attributes/${attr.attr_id}`,putdata);
        console.log(res);

      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
     async handleInputConfirm(attr) {
        let inputValue = this.inputValue;
        if (inputValue) {
          attr.attr_vals.push(inputValue);

          let putdata = {
          attr_name: attr.attr_name,
          attr_sel: "many",
          attr_vals: attr.attr_vals.join(",")
        };
        const res = await this.$http.put(
          `categories/${this.selectedOptions[2]}/attributes/${attr.attr_id}
`,
          putdata
        );
        
        

        }
        this.inputVisible = false;
        this.inputValue = '';
      },
       async handleClick(){
            if(this.active === '2'){
                if(this.selectedOptions.length===3){
                    const res =
                    await this.$http.get(`categories/${this.selectedOptions[2]}/attributes?sel=only`)
                
                    this.stateDyparams = res.data.data;
                    
                }
            }
        },
        async handleChange(){
            if(this.selectedOptions.length===3){
                const res =
                    await this.$http.get(`categories/${this.selectedOptions[2]}/attributes?sel=many`)
                
                console.log(res)
                this.arrDyparams = res.data.data;
                //将字符串转换为数组
                this.arrDyparams.forEach((item) => {
                    item.attr_vals =
                        item.attr_vals.trim().length === 0 ?
                        [] : item.attr_vals.trim().split(',')
                    
                })
            }
        },
    async getGoodsList(){
        const res = await this.$http.get(`categories?type=3`)
        this.goodslist =res.data.data;
        //console.log(res)
        },
    }
}
</script>

<style>
.box-card{
    height:100%;
}
.alert{
    margin: 20px 0;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>